<template>
	<view class="page">
		<nav-bar title="个人信息" bgColor="#F5f5f5"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="cell_list" @click="onUnloadImg">
			<view class="cell_left txt">头像</view>
			<view class="cell_right">
				<image :src="headImg" mode="aspectFill"></image>
			</view>
		</view>
		<z-prompt ref="popup" :value="nickName" text="请输入昵称" @change="onNameChange" :options="popupOptions">
			<view class="cell_list">
				<view class="cell_left txt">昵称</view>
				<view class="cell_right arrow">{{ nickName }}</view>
			</view>
		</z-prompt>
		<!-- 按钮 -->
		<view class="form_but"><button class="active" @click="onSubmit">保存</button></view>
	</view>
</template>

<script>
	import zPrompt from '@/components/common/prompt';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			zPrompt
		},
		data() {
			return {
				popupOptions: {
					placeholder: ''
				},
				headImg: '',
				nickName: '',

			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {

			this.headImg =  this.userInfo.headImg;
			this.nickName = this.userInfo.nickName;
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			...mapMutations(['setUserInfo']),
			//修改昵称
			onNameChange(e) {
				this.nickName = e.value;
				e.close();
			},
			//修改头像
			onUnloadImg() {
				this.$http.qnImgUpload({
					count: 1
				}).then(res => {
					this.headImg = res[0];
				});
			},
			//提交
			onSubmit() {
				if (this.headImg == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					});
					return;
				}
				if (this.nickName == '') {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return;
				}
				this.$http
					.post('api/mime/v1/edit', {
						nickName: this.nickName,
						headImg: this.headImg
					})
					.then(res => {
						this.setUserInfo({
							nickName: this.nickName,
							headImg: this.headImg
						});
						uni.showToast({
							title: '修改成功！'
						});

					});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.cell_list {
		padding: 30rpx 30rpx;
		margin: 20rpx 30rpx 0 30rpx;
		border-radius: 8rpx;
	}

	.cell_right image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}
</style>
